<template>
  <!-- 安防-门禁通行记录 -->
  <div class="fire-alarm chart-box1">
    <div class="chart-title">门禁通行记录</div>
    <div class="chart-content" align="middle">
      <div class="record-list-wrap datav-scroller-bar" @scroll="handleScroll">
        <div class="record-list" v-if="list.length > 0" ref="recordListRef">
          <div v-for="(item, index) of list" :key="index" class="record-item">
            <img :src="item.face_img" alt="" class="record-item-avatar" />
            <div class="record-item-desc">
              <div v-for="(cItem, cIndex) of item.content" :key="cIndex">
                <span>{{ cItem.label }}：</span>
                <span>{{ cItem.value || "--" }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, ref } from "vue";
import CountTo from "../countTo/index.vue";
import common from "../../utils/common";
import request from "../../../../common/utils/request";

export default defineComponent({
  name: "PassRecord",
  components: { CountTo },
  setup(props) {
    let keyCount = 1;
    const state = reactive({
      chartKey: `current_peak_${keyCount}`,
      list: [],
      page: 1,
      pageSize: 10,
      hasMore: false,
    });

    const getData = () => {
      let params = { page: state.page, pageSize: state.pageSize };
      request
        .get("/work_visitor", "/org/faceDevice/history/list", { ...params })
        .then((res) => {
          if (res.list) {
            state.list = res.list;
            if (state.page < res.total_page) {
              state.hasMore = true;
            } else {
              state.hasMore = false;
            }
          }
        });
    };

    getData();

    const loadMore = () => {
      let params = { page: state.page, pageSize: state.pageSize };
      request
        .get("/work_visitor", "/org/faceDevice/history/list", { ...params })
        .then((res) => {
          if (res.list) {
            state.list = state.list.concat(res.list);
            if (state.page < res.total_page) {
              state.hasMore = true;
            } else {
              state.hasMore = false;
            }
          }
        });
    };

    const recordListRef = ref(null);

    const handleScroll = (e) => {
      if (
        e.target.scrollTop + e.target.offsetHeight >=
        recordListRef.value.offsetHeight
      ) {
        console.log("滑到底部了");
        if (state.hasMore) {
          state.page++;
          loadMore();
        }
      }
    };

    return {
      ...toRefs(state),
      recordListRef,
      handleScroll,
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";

.record-list-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden auto;

  .record-item {
    text-align: left;
    margin-top: 1rem;
    display: flex;
    width: 100%;
    // height: calc((100% - 3rem) / 4);
    height: 13.2rem;

    &:first-child {
      margin-top: 0;
    }

    .record-item-avatar {
      width: 40%;
      object-fit: cover;
      border-radius: 0.4rem;
    }

    .record-item-desc {
      width: 60%;
      padding-left: 2rem;
      text-align: left;
      font-size: 1.2rem;
    }
  }
}
</style>
